import React from "react";
import { Link } from "react-router-dom";
import { SearchOutlined, ShoppingCartOutlined } from '@ant-design/icons';
export default class App extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            arr: [],
            arr1: [],
            tabIndex: -1,
            token: ''
        }
    }
    componentDidMount() {
        this.setState({
            token: window.localStorage.getItem('token')
        })
        this.$axios
            .get(
                "https://apipc-xiaotuxian-front.itheima.net/home/category/head"
            )
            .then(res => {
                // console.log(res);
                if (res.data.msg == '操作成功') {
                    this.setState({
                        arr: res.data.result
                    });
                }

            });
    }
    over(index) {
        this.setState({
            tabIndex: index
        })
    }
    out() {
        this.setState({
            tabIndex: -1
        })
    }
    clear() {
        window.localStorage.clear()
        this.setState({
            token: this.state.token
        })
    }

    render() {
        const { token } = this.state
        return <div>
            <div className="top">
                <div className="commonwidth">
                    <ul>
                        {
                            token ? <li><a href="/#/login">{window.localStorage.getItem('account')}</a></li> : <li><a href="/#/login">请先登录</a></li>
                        }
                        {
                            token ? <li><a href="#" onClick={this.clear.bind(this)}>退出登录</a></li> : <li><a href="">免费注册</a></li>
                        }
                        <li><a href="">我的订单</a></li>
                        <li><a href="">会员中心</a></li>
                        <li><a href="">帮助中心</a></li>
                        <li><a href="">关于我们</a></li>
                        <li><a href="">手机版</a></li>
                    </ul>
                </div>
            </div>
            <div className="fles">
                {this.state.arr.length > 0 && <div className="commonwidth fle">
                    <div className="logo"></div>
                    <ul>
                        <li className="c"><a href="/#/">首页</a></li>
                        {
                            this.state.arr.map((i, index) => {
                                return <li className="showInfo" key={index} onMouseOver={this.over.bind(this, index)} onMouseOut={this.out.bind(this)}>
                                    <Link to={'/category/' + i.id}>{i.name}</Link>
                                    <div className={`layer ${index == this.state.tabIndex && 'shou'}`}>
                                        <ul>
                                            {i.children.map((item, index) => {
                                                return <li key={index}>
                                                    <img src={item.picture} alt="" />
                                                    <span>{item.name}</span>
                                                </li>
                                            })}

                                        </ul>
                                    </div>
                                </li>
                            })
                        }
                    </ul>
                    <div className="search" >
                        <SearchOutlined style={{ fontSize: '20px' }} />
                        <input type="text" placeholder="搜一搜" />
                        <Link to={'/cart'}> <ShoppingCartOutlined style={{ fontSize: '20px' }} /></Link>

                        <em>0</em>
                    </div>
                </div>}
            </div>


        </div >
    }
}